<!DOCTYPE html>
<html ng-app="demoApp">
<head>
  <script src="../node_modules/angular/angular.js"></script>
</head>
<body>
  <div ng-controller="demoController">
    <input type="text" ng-model="curTodoItem.content">
    <button ng-click="addTodo()">Add</button>
    <ul>
      <li ng-repeat="item in todoList">
        {{ item.content }}
      </li>
    </ul>
  </div>

<script>
  angular.module('demoApp', [])
    .factory('todoService', ['$http', function($http) {
      function query() {
        return $http.get('query-todo-list')
      }
      function add(item) {
        return $http.post('query-todo-list', item)
      }
      return {
        query,
        add
      }
    }])
    .controller('demoController', ['$scope', 'todoService', function ($scope, todoService) {
      $scope.todoList = [{ content: 'write a doc' }];
      $scope.curTodoItem = { content: '' };

      $scope.queryTodoList = function() {
        // 使用自定义服务
        todoService.query().then(res => {
          // ...
        })
      }

      $scope.addTodo = function() {
        // 使用自定义服务
        todoService.add($scope.curTodoItem).then(res => {
          // ...
        })
      }
    }]);
</script>
</body>
</html>